<template>
    <div>
        <transition name="myFade">
            <van-search v-model="inputVal" placeholder="请输入搜索关键词" readonly @click="showPopup" />
        </transition>

        <div class="fenlei">
            <van-sidebar v-model="activeKey" @change="onChange(categoryList[activeKey].id)">
                <van-sidebar-item :title="item.name" v-for="item in categoryList" :key="item.id" />
            </van-sidebar>
            <ul>
                <div v-for="(item,index) in categoryList" :key="index" v-show="index==activeKey">
                    <img :src="item.banner_url" alt="">
                    <h5>{{item.front_name}}</h5>
                    <div class="mytitle">
                        <span></span>
                        <h3>{{item.name}}</h3>
                    </div>
                </div>
                <van-grid square :column-num="3">
                        <van-grid-item v-for="item in subCategoryList" :key="item.id" :icon="item.wap_banner_url" :text="item.name" @click="categoryToSearch(item.name)" />
                    </van-grid>
            </ul>
        </div>

        <transition name="fade">
            <div class="mymodal" v-show="$route.path=='/category/popup'"></div>
        </transition>
        <transition name="slide">
            <router-view />
        </transition>
    </div>
</template>

<script>
    import {
        CatalogApi,
        CatalogListApi
    } from '../request/api'
    export default {
        data() {
            return {
                inputVal: "",
                activeKey: 0,
                categoryList: [],
                subCategoryList:[],
            }
        },
        methods: {
            categoryToSearch(val){
                this.$router.push({path:'/category/popup',query:{"blockShowNum":2,"keyword":val}})
            },

            showPopup() {
                this.$router.push("/category/popup")
                // 当路径变成了  /home/popup 的时候，透明层就过渡为黑色
            },
            onChange(val) {
                this.getSubCategoryList(val)
            },
            getSubCategoryList(val){
                    CatalogListApi({
                    id: val,
                }).then(res => {
                    console.log(res);
                    let {
                        subCategoryList,
                    } = res.data.currentCategory;
                    this.subCategoryList = subCategoryList;
                })
            }
        },
        created() {
            CatalogApi().then(res => {
                console.log(res);
                if (res.errno == 0) {
                    let {
                        categoryList,
                    } = res.data;
                    this.categoryList = categoryList;
                    // this.subCategoryList = categoryList.subCategoryList;
                    // console.log(this.subCategoryList);

                }
            }),
            CatalogListApi({
                    id: 1005000,
                }).then(res => {
                    console.log(res);
                    let {
                        subCategoryList,
                    } = res.data.currentCategory;
                    this.subCategoryList = subCategoryList;
                })

            

            // this.getSubCategoryList(this.categoryList.id)
        }
    }
</script>

<style lang="less" scoped>
    .fenlei {
        height: 90vh;
        background-color: #fff;
        display: flex;

        .van-sidebar {
            background-color: #f7f8fa;
            flex: 1;
            height: 90vh;
        }

        ul {
            flex: 4;

            div {
                width: 100%;
                position: relative;

                img {
                    margin: 0 7px;
                    border-radius: 5px;
                    box-shadow: 0 0 6px #000;
                    filter: brightness(0.5);
                    height: 140px;
                    width: 95%;
                }

                h5 {
                    width: 100%;
                    color: #fff;
                    position: absolute;
                    top: 36%;
                    left: 0%;
                    z-index: 222;
                    text-align: center;
                    font-size: 14px;
                }

                .mytitle {
                    width: 100%;
                    height: 50px;
                    position: relative;
                    background: #fff;
                    font-size: 16px;

                    span {
                        width: 50%;
                        height: 2px;
                        background-color: #ccc;
                        position: absolute;
                        margin: auto;
                        left: 0;
                        top: 0;
                        bottom: 0;
                        right: 0;
                    }

                    h3 {
                        width: 30%;
                        height: 40px;
                        background-color: #fff;
                        position: absolute;
                        margin: auto;
                        left: 0;
                        top: 0;
                        bottom: 0;
                        right: 0;
                        line-height: 40px;
                        text-align: center;
                        color: #000;
                        font-size: 16px;
                    }
                }
            }
        }
    }
    
    .popup {
        z-index: 999;
    }

    .mymodal {
        width: 100%;
        height: 100%;
        background-color: #333;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 998;
    }

    /* 右侧滑动进入 -- start */
    .slide-enter,
    .slide-leave-to {
        right: -100%;
    }

    .slide-enter-active,
    .slide-leave-active {
        transition: right 0.5s linear;
    }

    .slide-enter-to,
    .slide-leave {
        right: 0;
    }

    /* 右侧滑动进入 -- end */

    /* 右侧淡入淡出 -- start */
    .fade-enter,
    .fade-leave-to {
        opacity: 0;
    }

    .fade-enter-active,
    .fade-leave-active {
        transition: opacity 0.5s linear;
    }

    .fade-enter-to,
    .fade-leave {
        opacity: 1;
    }

    /* 右侧淡入淡出 -- end */

    /* 首页淡入淡出 -- start */
    .myFade-enter,
    .myFade-leave-to {
        opacity: 0;
    }

    .myFade-enter-active {
        transition: opacity 0.3s linear;
    }

    .myFade-leave-active {
        transition: opacity 1s linear;
    }

    .myFade-enter-to,
    .myFade-leave {
        opacity: 1;
    }

    /* 首页淡入淡出 -- end */
</style>